<template>
  <div class="top">
    <div class="container">
      <div class="loginList">
        <p>菩提优购欢迎您！</p>
        <p>
          <span>请</span>
          <router-link to="/login">登录</router-link>
          <router-link to="/register" class="register">免费注册</router-link>
        </p>
        <!-- <p v-if="!userInfo.loginName">
          <span>请</span>
          <router-link to="/login">登录</router-link>
          <router-link to="/register" class="register">免费注册</router-link>
        </p> -->
        <!-- <p >
          <span>普通用户 </span>
          <router-link to="/account">{{ userInfo.loginName }}</router-link>
          <a class="register" @click.prevent="logOut">退出登录</a>
        </p> -->
      </div>
      <div class="typeList">
        <router-link to="/">我的订单</router-link>
        <router-link to="/">我的购物车</router-link>
        <a href="###">我的账户</a>
        <a href="###">菩提会员</a>
        <a href="###">企业采购</a>
        <a href="###">关注菩提优购</a>
        <a href="###">合作招商</a>
        <a href="###">商家后台</a>
      </div>
    </div>
  </div>
</template>

<script setup>
name: "Nav";
</script>

<style scoped lang="less">
.top {
  background-color: #dadada;
  height: 30px;
  line-height: 30px;

  .container {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;

    .loginList {
      float: left;

      p {
        float: left;
        margin-right: 10px;

        .register {
          border-left: 1px solid #b3aeae;
          padding: 0 5px;
          margin-left: 5px;
          color: #3498db;
          font-weight: 600;
        }
      }
    }

    .typeList {
      float: right;

      a {
        padding: 0 10px;

        & + a {
          border-left: 1px solid #b3aeae;
        }
      }
    }
  }
}
</style>
